<template>
  <Dialog title="聊天内容" v-model="dialogVisible" ref="sessionRecordRef">
    <el-scrollbar max-height="460px" style="padding-right: 20px" v-loading="loading">
      <div
        v-for="(item, index) in list"
        :key="index"
        :class="{ textRight: item.userType == 2 }"
        class="message-item"
      >
        <div class="message-header">
          <span v-if="item.userType == 1" class="avatar customer-avatar"
            ><el-icon color="#fff" :size="30"><Avatar /></el-icon
          ></span>
          <span class="user-info" :style="item.userType == 2 ? 'align-items: flex-end' : ''">
            <span class="username">{{ item.fromUserName }}</span>
            <span class="timestamp">{{ formatDate(item.createTime) }}</span>
          </span>
          <span v-if="item.userType == 2" class="avatar service-avatar"
            ><el-icon color="#fff" :size="30"><Headset /></el-icon
          ></span>
        </div>
        <div v-if="item.msgType != 7" class="content" v-html="item.msgContent"></div>
        <div v-if="item.msgType == 7" class="content form-content">
          <el-descriptions
            border
            v-if="getTypeSeven(item.msgContent) != '解析失败'"
            title="填写表单"
            class="form-descriptions"
          >
            <el-descriptions-item
              v-for="formItem in getTypeSeven(item.msgContent)"
              :key="formItem.formId"
              :label="formItem.formLabel"
              >{{ formItem.value }}</el-descriptions-item
            >
          </el-descriptions>
          <span v-else class="parse-error">解析失败</span>
        </div>
      </div>

      <el-empty v-if="list.length == 0" description="暂无聊天记录" class="empty-state" />
    </el-scrollbar>
  </Dialog>
</template>
<script setup lang="ts">
import { Avatar, Headset } from '@element-plus/icons-vue'
import * as CustomerApi from '@/api/service/customer'
import { formatDate } from '@/utils/formatTime'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const sessionRecordRef = ref() // 表单 Ref
const loading = ref(true) // 列表的加载中

const list = ref([])

/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  getChatMessage(id)
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 查询聊天记录 */
const getChatMessage = async (id) => {
  loading.value = true
  try {
    const data = await CustomerApi.getChatMessage({ customerId: id })
    list.value = data
  } finally {
    loading.value = false
  }
}

const getTypeSeven = (item) => {
  try {
    const result = JSON.parse(item).formContent
    return result
  } catch (error) {
    return '解析失败'
  }
}
</script>
<style scoped lang="scss">
// 主题色变量
$primary-color: #0052cc;
$primary-light: rgba(0, 82, 204, 0.1);
$primary-border: rgba(0, 82, 204, 0.3);
$text-primary: #333;
$text-secondary: #666;
$text-light: #999;
$border-radius: 12px;
$shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

// 消息项容器
.message-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 16px 0;
  padding: 0 8px;

  // H5适配
  @media (max-width: 768px) {
    margin: 12px 0;
    padding: 0 4px;
  }
}

// 右侧消息（客服）
.textRight {
  align-items: flex-end;

  .content {
    background: $primary-color;
    color: white;
    border: 1px solid $primary-color;
    border-top-left-radius: $border-radius;
    border-top-right-radius: 4px;
    border-bottom-left-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
    margin-left: 0;
    margin-right: 50px;

    // H5适配
    @media (max-width: 768px) {
      margin-right: 40px;
      max-width: calc(100vw - 120px);
    }
  }
}

// 消息头部
.message-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  width: 100%;
}

// 用户信息
.user-info {
  display: flex;
  flex-direction: column;
  flex: 1;

  .username {
    font-size: 14px;
    font-weight: 500;
    color: $text-primary;
    margin-bottom: 2px;
  }

  .timestamp {
    font-size: 12px;
    color: $text-light;
  }
}

// 头像样式
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: $shadow;
  transition: all 0.3s ease;

  // H5适配
  @media (max-width: 768px) {
    width: 36px;
    height: 36px;
  }

  &:hover {
    transform: scale(1.05);
  }
}

// 客户头像
.customer-avatar {
  background: linear-gradient(135deg, $primary-color, lighten($primary-color, 10%));
  margin-right: 12px;

  @media (max-width: 768px) {
    margin-right: 8px;
  }
}

// 客服头像
.service-avatar {
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
  margin-left: 12px;

  @media (max-width: 768px) {
    margin-left: 8px;
  }
}

// 消息内容
.content {
  max-width: 400px;
  padding: 12px 16px;
  box-sizing: border-box;
  border: 1px solid $primary-border;
  border-radius: $border-radius;
  border-top-left-radius: 4px;
  background: $primary-light;
  margin-left: 52px;
  word-wrap: break-word;
  word-break: break-word;
  line-height: 1.5;
  font-size: 14px;
  color: $text-primary;
  box-shadow: $shadow;
  transition: all 0.3s ease;

  // H5适配
  @media (max-width: 768px) {
    max-width: calc(100vw - 120px);
    margin-left: 44px;
    padding: 10px 12px;
    font-size: 13px;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

// 表单内容特殊样式
.form-content {
  background: #f8f9ff;
  border-color: $primary-color;

  .form-descriptions {
    :deep(.el-descriptions__header) {
      background: $primary-light;
      color: $primary-color;
      font-weight: 600;
    }

    :deep(.el-descriptions__label) {
      background: #fafbff;
      color: $text-secondary;
      font-weight: 500;
    }

    :deep(.el-descriptions__content) {
      background: white;
      color: $text-primary;
    }
  }
}

// 解析错误样式
.parse-error {
  color: #ff4757;
  font-style: italic;
  font-size: 13px;
}

// 空状态样式
.empty-state {
  margin: 40px 0;

  :deep(.el-empty__description) {
    color: $text-light;
    font-size: 14px;
  }

  :deep(.el-empty__image) {
    opacity: 0.6;
  }
}

// 滚动条美化
:deep(.el-scrollbar__bar) {
  &.is-vertical .el-scrollbar__thumb {
    background: rgba(0, 82, 204, 0.3);
    border-radius: 4px;

    &:hover {
      background: rgba(0, 82, 204, 0.5);
    }
  }
}

// 加载状态优化
:deep(.el-loading-mask) {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
}

// 响应式优化
@media (max-width: 480px) {
  .message-item {
    padding: 0 2px;
  }

  .content {
    max-width: calc(100vw - 80px);
    margin-left: 38px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .textRight .content {
    margin-right: 38px;
    max-width: calc(100vw - 80px);
  }

  .avatar {
    width: 32px;
    height: 32px;
  }

  .user-info {
    .username {
      font-size: 13px;
    }

    .timestamp {
      font-size: 11px;
    }
  }
}
</style>
